Laravel / Advanced / Convert Html to pdf

Convert HTML to PDF

fonts

https://www.justinmind.com/blog/best-google-web-fonts-website/
https://freefontsdownload.net/free-arial-font-160187.htm

1. install package


              composer require barryvdh/laravel-dompdf

2. Set Up Dompdf Extension

config/app.php and place the DomPDF services in providers and aliases array.


              'providers' => [
                Barryvdh\DomPDF\ServiceProvider::class,
              ],

              'aliases' => [
                'PDF' => Barryvdh\DomPDF\Facade::class,
              ]

3. creates a config file and the locus of the file is config/dompdf.php


              php artisan vendor:publish

Coding

1. in controller

1. store in storage


              use PDF;

              .... 
              .... 
              $pdf_doc = PDF::loadView('/pdf/export_pdf', $p);
              Storage::put('invoice.pdf', $pdf_doc->output());

1. /pdf/export_pdf is blade inside resources/views
2. Storage::put() save the file in storage folder 2. direct download if we want to download pdf file


              $pdf_doc = PDF::loadView('/pdf/export_pdf', $p);
              return $pdf_doc->download('invoice1.pdf');

3. direct open in browser


              $pdf_doc = PDF::loadView('/pdf/export_pdf', $p);
              return $pdf_doc->stream();

4. access file stored in storage


                         $headers = [
                            'Content-Type' => 'application/pdf',
                        ];
                        $orders=Orders::find($id);
                        $path = storage_path().'/'.'app'.'/public/'.$orders->invoice_pdf;
                        if (file_exists($path)) {
                            return Response()->download($path,$orders->invoice_pdf,$headers);
                        }

Sample HTML

1. Multiple page




                  <!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        <style>
            /** 
                Set the margins of the page to 0, so the footer and the header
                can be of the full height and width !
             **/

            *{
                font-family:arial;
            } 
            @page  {
                margin: 0cm 0cm;
            }

            /** Define now the real margins of every page in the PDF **/
            .body1 {
                /* margin-top: 2cm;
                margin-left: 2cm;
                margin-right: 2cm;
                margin-bottom: 2cm; */
                padding-left:20px;
                padding-right:40px;
                padding-top:100px;
                
                background-image: url( 'images/1.png' ); background-repeat: no-repeat; background-position: center;
            }

            .body1 div, .body2 div{
               
            }

            .body2 {
                /* margin-top: 2cm;
                margin-left: 2cm;
                margin-right: 2cm;
                margin-bottom: 2cm; */
                padding-left:20px;
                padding-right:40px;
                background-image: url( 'images/2.png' ); background-repeat: no-repeat; background-position: center;
            }
            .body2 h2, .body2 .row{
                color:#fff;
                font-weight:bold;
            }

            /** Define the header rules **/
            header1 {
                position: fixed;
                top: 0cm;
                left: 0cm;
                right: 0cm;
                height: 2cm;

                /** Extra personal styles **/
                background-color: #03a9f4;
                color: white;
                text-align: center;
                line-height: 1.5cm;
            }

            /** Define the footer rules **/
            footer1 {
                position: fixed; 
                bottom: 0cm; 
                left: 0cm; 
                right: 0cm;
                height: 2cm;

                /** Extra personal styles **/
                background-color: #03a9f4;
                color: white;
                text-align: center;
                line-height: 1.5cm;
            }

            h3{
                border-bottom:1px solid #03a9f4;
                font-size:18px;
            }

            h4{
                font-weight:bold;
                font-size:14px;
            }

            .pull-center{
                text-align: center;
            }

            .main-heading, .main-row{
                background-color: #03a9f4;
            }
        </style>


    </head>
    

    <body class="body2">
        <!-- Define header and footer blocks before your content -->
    

        <!-- Wrap the content of your PDF inside a main tag -->
        <main>
            
           

           
        </main>


        
    </body>




    <body class="body1">
       
        <main>
             





        </main>        
    </body>







</html>

2. Header & footer


<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        <style>
            /** 
                Set the margins of the page to 0, so the footer and the header
                can be of the full height and width !
             **/
            @page  {
                margin: 0cm 0cm;
            }

            /** Define now the real margins of every page in the PDF **/
            body {
                margin-top: 2cm;
                margin-left: 2cm;
                margin-right: 2cm;
                margin-bottom: 2cm;
                color:#000;
            }

            /** Define the header rules **/
            header {
                /* position: fixed;
                top: 0cm;
                left: 0cm;
                right: 0cm; */

                height: 5cm;

                /** Extra personal styles **/
                /* background-color: #03a9f4; */
                color: #000;
                text-align: center;
                line-height: 1.5cm;
                background-image:url('../public/images/header.png');
                background-repeat:no-repeat;
                background-position: center 50%;
            }

            /** Define the footer rules **/
            footer {
                position: fixed; 
                bottom: 0cm; 
                left: 0cm; 
                right: 0cm;
                height: 2cm;

                /** Extra personal styles **/
                /* background-color: #03a9f4; */
                color: white;
                text-align: center;
                line-height: 1.5cm;
                background-image:url('../public/images/footer.png');
                background-repeat:no-repeat;
                background-position: center 50%;
               
            }

            h3{
                border-bottom:2px solid #03a9f4;
                font-size:18px;
            }

            h4{
                font-weight:bold;
                font-size:14px;
            }

            .pull-center{
                text-align: center;
            }

            .main-heading, .main-row{
                background-color: #03a9f4;
            }

            p{
                color:#000 !important;
            }

            .address{
                color:#03a9f4;
                font-size:22px;
                font-weight:25px;
            }
        </style>
    </head>
    <body>
        <!-- Define header and footer blocks before your content -->
        <header>
            <!-- <img src="/home3/imjhslmy/public_html/blog-manvia-in/public/images/1.png"> -->
        </header>

        <footer>
            <!-- <img src="/home3/imjhslmy/public_html/blog-manvia-in/public/images/1.png"> -->
        </footer>

        <!-- Wrap the content of your PDF inside a main tag -->
        <main>
            
            
            


        </main>


        
    </body>
</html>

Custom font

1. google font

1.download font from https://fonts.google.com/

2. save the fonts in storage folder

2. Sample code


                    <!DOCTYPE html>
                            <html>
                            <head>
                            <link href='https://fonts.googleapis.com/css?family=Kaushan Script' rel='stylesheet'>
                            <style>
                            body {
                                font-family: 'Kaushan Script';font-size: 22px;
                            }
                            </style>
                            </head>
                            <body>

                            <h1>Kaushan Script</h1>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                            <p>123456790</p>
                            <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
                            <p>abcdefghijklmnopqrstuvwxyz</p>

                            </body>
                            </html>

3. link the font


                            <style>
                            @font-face {
                                font-family: 'Kaushan Script';
                                src: url(/home3/imjhslmy/public_html/blog-manvia-in/storage/fonts\KaushanScript-Regular.ttf) format("truetype");
                                font-weight: 400; // use the matching font-weight here ( 100, 200, 300, 400, etc).
                                font-style: normal; // use the matching font-style here
                            }
                            </style>

use bootstrap file


                    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

to check online https://www.w3schools.com/howto/tryit.asp?font=Kaushan%20Script OR

download and put the fonts in storage/app/public/fonts

change the configuration font_dir to storage_path('app/public/fonts/')

change directory ownership to the webserver , chmod -R 777 storage

in view page call .ttf using asset()


                        @font-face {
                            font-family: 'Arial Narrow Bold';                        
                            src: url('https://blog.manvia.in/storage/app/public/fonts/arial_narrow_normal_9c5a59f7d5311e9747faa4042ec12745.ttf') format("truetype");
                            
                            font-style: bold; 
                        }

                        body {
                            font-family: 'Arial Narrow Bold', arial-narrow;font-size: 11px;font-weight:bold;
                            line-height:12px;
                        }

Custom Size



                            $pdf = PDF::loadView('/pdf/purchase', $this->data)->setPaper('a5');
                            return $pdf->stream('purchase.pdf');



                            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Kanadikavu</title>
<link rel="stylesheet" href="https://blog.manvia.in/public/app/bootstrap.min.css">
</head>
<style>
@page  { margin:15mm 0mm 0mm 10mm;
     padding:0px}
body { margin:0px; padding:0px }
@font-face {
    font-family: 'Arial Narrow Bold';
   
    src: url('https://blog.manvia.in/storage/app/public/fonts/arial_narrow_normal_9c5a59f7d5311e9747faa4042ec12745.ttf') format("truetype");
    
    font-style: bold; // use the matching font-style here
}

body {
    font-family: 'Arial Narrow Bold', arial-narrow;font-size: 11px;font-weight:bold;
    line-height:12px;
    /* background-image: url("https://blog.manvia.in/public/images/assress.png" ); background-repeat: no-repeat; background-position: center; */
}
table.table-bordered{
    border:1px solid #fff;
   
  }
table.table-bordered > thead > tr > th{
    border:1px solid #fff;
}
table.table-bordered > tbody > tr > td{
    border:1px solid #fff;
    padding:0px;
    margin:0px;
}

   
 </style>
<body >











</body>
</html>

Issues

Min height

Solution



                            <tr>
                                <td style="width:100%">
                                    <div style="height:100px; min-height:100px;">
                                     Hardwired Productions Dallas
                                     </div>


                                </td>	                   
                            </tr>